<!-- 修改产品物料分类信息 -->
<template>
    <el-dialog v-model="dialogVisible" width="500" destroy-on-close draggable align-center :before-close="handleClose">
        <el-select
            v-model="value"
            placeholder="选择分类名称"
            size="large"
            style="width: 240px"
        >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
        </el-select>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleUpdate">
                    更新
                </el-button>
                <el-button @click="handleClose">取消</el-button>

            </div>
        </template>
    </el-dialog>
</template>
<script>
import mdAPI from "../../../util/request-md/mat-pro/mat-pro.js";

export default {
    props: ['visible', 'details'],
    emits: ['callClosed','calledUpdateSuccess'],
    data() {
        return {
            dialogVisible: false,
            category:0,
            options: [],

            value: ''
        }
    },
    watch: {
        visible(val) {
            this.dialogVisible = val;
            this.category = this.details.category;
            this.loadClassify();
        }
    },
    methods: {
        handleUpdate() {
            let updateStatusParam = {
                id: this.details.id,
                classifyId: this.value,
                category: this.details.category
            };
            mdAPI.updateProductClassifyInfo(updateStatusParam, ((res) => {
                if (res.code === 200) {
                    this.$message.success("设置成功");
                    this.dialogVisible = false;
                    this.details.classifyId = this.classifyId;
                    this.$emit('calledUpdateSuccess', this.options.find((item) => { return item.value === this.value}));
                } else {
                    this.$message.error("网络不佳，请稍后再试");
                }
            }));
        },
        loadClassify(){
            this.options=[];
            mdAPI.getMatProClassify((res)=>{
                if(res.code === 200){
                    for (let i = 0; i < res.data.length; i++) {
                        if (res.data[i].category === this.category){
                            this.options.push({
                                value: res.data[i].idClassify,
                                label: res.data[i].name,
                            });
                        }
                    }
                }
            });
        },
        handleClose() {
            this.$emit('callClosed');
        },
        handleChange(data){
            console.log(data);
        }
    },
    mounted() {
        // this.loadClassify();
    }

}
</script>
<style></style>